<template>
  <div class="user_tetail_out">
    <div class="same_title">
      <a href="#" @click="back">
        <img src="../../static/img/back.png" alt="">
      </a>
      身份信息
    </div>
    <el-row class="user_form_out">
      <el-form ref="form" :model="form" label-width="80px" class="user_form" :rules="rules2" >
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="user_no_border" label="身份证号"  prop="idCard">
          <el-input v-model.number="form.idCard" placeholder="证件号"></el-input>
        </el-form-item>
        <el-row class="user_placeholder"></el-row>
        <el-form-item label="借款金额" prop="loanAmount">
          <el-row>
            <el-col :xs="20">
              <el-input v-model.number="form.loanAmount" placeholder="请输入"></el-input>
            </el-col>
            <el-col :xs="4">
              元
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="借款用途" prop="loanUse">
          <el-select v-model="form.loanUse" placeholder="请选择">
            <el-option label="旅游消费" value="1"></el-option>
            <el-option label="培训进修" value="2"></el-option>
            <el-option label="购车消费" value="3"></el-option>
            <el-option label="婚庆消费" value="4"></el-option>
            <el-option label="医疗消费" value="5"></el-option>
            <el-option label="装修消费" value="6"></el-option>
            <el-option label="百货消费" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教育程度"  prop="educational">
          <el-select v-model="form.educational" placeholder="请选择">
            <el-option label="硕士及以上" value="1"></el-option>
            <el-option label="本科" value="2"></el-option>
            <el-option label="大专" value="3"></el-option>
            <el-option label="中专/高中及以下" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-row class="city_out">
          <el-col :xs="6" class="city_name">
            居住城市
          </el-col>
          <el-col :xs="6">
            <el-select v-model="provinceId" placeholder="请选择" @change="changeCity">
              <el-option
                v-for="item in province"
                :key="item.provinceId"
                :label="item.provinceName"
                :value="item.provinceId">
              </el-option>
            </el-select>
          </el-col>
          <el-col :xs="6">
            <el-select v-model="cityId" placeholder="请选择"  @change="changeCounty">
              <el-option
                v-for="item in city"
                :key="item.cityId"
                :label="item.cityName"
                :value="item.cityId">
              </el-option>
            </el-select>
          </el-col>
          <el-col :xs="6">
            <el-select v-model="countyId" placeholder="请选择">
              <el-option
                v-for="item in county"
                :key="item.countyId"
                :label="item.countyName"
                :value="item.countyId">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="user_placeholder"></el-row>
        <el-form-item label="社保" prop="socialSecurity">
          <el-select v-model="form.socialSecurity" placeholder="请选择">
            <el-option label="无社保" value="1"></el-option>
            <el-option label="有社保，不满6个月" value="2"></el-option>
            <el-option label="有社保，6个月以上" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职业身份" prop="occupational">
          <el-select v-model="form.occupational" placeholder="请选择" @change="inChange($event)">
            <el-option label="工薪族" value="1"></el-option>
            <el-option label="企业主" value="2"></el-option>
            <el-option label="自由职业" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-for="(item3,index) in inC.info" :label='item3.data' :key="index">
          <el-row>
            <el-col :xs="20">
              <el-input  placeholder="请输入" @change="income($event,item3.keys)"  :data-info="item3.keys" :value="item3.val"></el-input>
            </el-col>
            <el-col :xs="4" v-if="item3.keys == 'wagesAmount'" >
              元
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="免费福利">
          <el-row class="welfare_row">
            <el-col :xs="20">
              自愿免费领取最高<span>100万出行保险</span>
            </el-col>
            <el-col :xs="4">
              <el-switch v-model="form.welfare"></el-switch>
            </el-col>
          </el-row>
          <el-row class="welfare_row">
            同意中国平安后续致电联系确认保险相关事宜
          </el-row>
        </el-form-item>
        <el-form-item  class="user_no_border agree_out">
          <el-row>
            <el-col :xs="2">
              <el-checkbox v-model="form.agree" label="同意" name="type"></el-checkbox>
            </el-col>
            <el-col :xs="6">点击表示同意</el-col>
            <el-col :xs="16" class="commit">《借款承诺书》、《借款说明书》</el-col>
          </el-row>
        </el-form-item>
        <el-form-item  class="user_no_border submit_out">
          <el-button class="user_submit" type="primary" @click="submit('form')" :disabled="!form.agree">资料确认，前往借款</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-dialog title="立即用钱" :visible.sync="dialogVisible" width="95%" top = "5px"  >
      <div  >
        <iframe seamless name="father_iframe" id="father_iframe"  src="http://www.baidu.com" height="500" width="100%"></iframe>
        <!--<iframe seamless name="father_iframe" id="father_iframe"  :src="moneyURL" height="500" width="100%"></iframe>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {areajson} from '../assets/selectArea'
  import {urlList} from '../assets/urlList.js'//引入接口地址文件
  function getCookie(cname)
  {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++)
    {
      var c = ca[i].trim();
      if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
  }
  let auth = getCookie('USER_P2P_H5_COOKIE');//获取cookie


  //获取地址栏信息
  function GetQueryString(name)
  {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = decodeURI(window.location.search.substr(1)).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
  }
  let id = GetQueryString("id");//获取地址栏信息
  let channelNum = GetQueryString("channelNum");//获取地址栏信息

  if(!channelNum){
    channelNum = 0
  }

  let params = new URLSearchParams()
  let params2 = new URLSearchParams()
  let params3 = new URLSearchParams()//提交给后台数据
  let params4 = new URLSearchParams()//提交给后台数据
  params.append('provinceId','')
  params.append('auth',auth)
  params2.append('cityId','')
  params2.append('auth',auth)

  params3.append('productId',id)//产品id
  params3.append('userName','')
  params3.append('auth',auth)
  params3.append('idCard','')
  params3.append('loanAmount','')
  params3.append('loanUse','')
  params3.append('educational','')
  params3.append('provinceId','')
  params3.append('cityId','')
  params3.append('countyId','')
  params3.append('socialSecurity','')
  params3.append('occupational','')
  params3.append('wagesAmount','')
  params3.append('seniority','')
  params3.append('channelNum',channelNum)
  params3.append('auth',auth)
  params4.append('auth',auth)

  //工作情况
  let occupational = [
    {
      info:[
        {data:'工资',keys:'wagesAmount',val:0},
        {data:'工龄',keys:'seniority',val:0},
      ]
    },
    {
      info:[
        {data:'月流水',keys:'wagesAmount',val:0},
        {data:'经营年限',keys:'seniority',val:0},
      ]
    },
    {
      info:[
        {data:'月均收入',keys:'wagesAmount',val:0}
      ]
    }
  ]
  export default {
    name: "user-detail",
    data() {
      let checkName = (rule,value,callback) => {
        if(!value){
          return callback(new Error('姓名不能为空'));
        }else{
          callback();
        }
      };
      let checkidCard = (rule,value,callback) => {
        if(!value){
          return callback(new Error('身份证号不能为空'));
        }else if(isNaN(value)){
          return callback(new Error('请输入数字'));
        }else{
          callback();
        }
      };
      let checkloanAmount = (rule,value,callback) => {
        if(!value){
          return callback(new Error('借款金额不能为空'));
        }else if(isNaN(value)){
          return callback(new Error('请输入数字'));
        }else{
          callback();
        }
      };
      let checkUse = (rule,value,callback) => {
        if(!value){
          return callback(new Error('借款用途不能为空'));
        }else{
          callback();
        }
      };
      let checkEducation = (rule,value,callback) => {
        if(!value){
          return callback(new Error('教育程度不能为空'));
        }else{
          callback();
        }
      };
      let checkCity = (rule,value,callback) => {
        if(!value){
          return callback(new Error('居住城市不能为空'));
        }else{
          callback();
        }
      };
      let checkSocial = (rule,value,callback) => {
        if(!value){
          return callback(new Error('社保不能为空'));
        }else{
          callback();
        }
      };
      let checkIdentity = (rule,value,callback) => {
        if(!value){
          return callback(new Error('职业身份不能为空'));
        }else{
          callback();
        }
      };
      return {
        form:{
          userName:'',//用户名
          idCard:'',//证件号
          loanAmount:'',//贷款金额
          loanUse:'',//贷款用途
          educational:'',//教育程度
          socialSecurity:'',//社保情况
          occupational:'',//工作情况
          welfare:false,//免费协议
          agree:true//是否同意协议
          // reg:true
        },
        wagesAmount:'',//月工资
        seniority:'',//工龄
        inC:[],//工作情况
        province:[],
        provinceId:'',//省份ID
        city:[],
        cityId:'',//城市 ID
        county:[],
        countyId:'',//区县ID
        options:areajson,//城市数据
        dialogVisible:false,
        moneyURL:'http://www.baidu.com',
        rules2: {
          userName:[
            { validator: checkName, trigger: 'blur' }
          ],
          idCard:[
            { validator: checkidCard, trigger: 'blur' }
          ],
          loanAmount:[
            { validator: checkloanAmount, trigger: 'blur' }
          ],
          loanUse:[
            { validator: checkUse, trigger: 'blur' }
          ],
          educational:[
            { validator: checkEducation, trigger: 'blur' }
          ],
          city:[
            { validator: checkCity, trigger: 'blur' },
          ],
          socialSecurity:[
            { validator: checkSocial, trigger: 'blur' }
          ],
          occupational:[
            { validator: checkIdentity, trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      back() {
        window.history.back(-1);
      },
      submit:function(formName) {
        let _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('验证成功')
            params3.set('userName',_this.form.userName)
            params3.set('idCard',_this.form.idCard)
            params3.set('loanAmount',_this.form.loanAmount)
            params3.set('loanUse',_this.form.loanUse)
            params3.set('educational',_this.form.educational)
            params3.set('provinceId',_this.provinceId)
            params3.set('cityId',_this.cityId)
            params3.set('countyId',_this.countyId)
            params3.set('socialSecurity',_this.form.socialSecurity)
            params3.set('occupational',_this.form.occupational)
            params3.set('wagesAmount',_this.wagesAmount)
            if(_this.seniority){
              params3.set('seniority',_this.seniority)
            }else{
              params3.set('seniority',0)
            }

            _this.$ajax({
              url:'/api/customer/apply.html?channelNum='+channelNum,
              method:'post',
              data:params3
            }).then(res => {
              // alert('立即用钱')
              window.location.href = res.data.data.supplierProductUrl
              console.log(res.data.data.supplierProductUrl)
              console.log(res)
            }).catch(res => {
              console.log('出错',res)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      //判断用户是否填写过信息
      getUserInfo () {
        let _this = this
        this.$ajax({
          url:'/api/customer/queryApplyInfo.html?channelNum='+channelNum,
          method:'post',
          data:params4
        }).then(function(res) {
          console.log('该用户填写过信息',res)
          if( res.data.customer.idCard){
            _this.form.userName = res.data.customer.username
            _this.form.idCard = res.data.customer.idCard
            _this.form.loanAmount = res.data.customer.loanAmount
            _this.form.loanUse = res.data.customer.loanUse
            _this.form.educational = res.data.customer.educational
            _this.provinceId = res.data.customer.provinceId
            _this.cityId = res.data.customer.cityId
            _this.countyId = res.data.customer.countyId
            _this.form.socialSecurity = res.data.customer.socialSecurity
            _this.form.occupational = res.data.customer.occupational
            _this.inC = occupational[res.data.customer.occupational-1]
            if(_this.inC.info.length == 2) {
              _this.inC.info[0].val = res.data.customer.wagesAmount
              _this.inC.info[1].val = res.data.customer.seniority
            }else{
              _this.inC.info[0].val = res.data.customer.wagesAmount
            }
            _this.wagesAmount = res.data.customer.wagesAmount
            _this.seniority = res.data.customer.seniority
          }
        }).catch(function(res) {
          console.log('错误')
        })
      },
      getProvince() {
        let _this = this;
        _this.city = [];
        _this.cityId = "";
        _this.county = [];
        _this.countyId ='';
        this.$ajax({
          url:'/api/area/list/province.html?channelNum='+channelNum,
          method:'post',
          data:params4
        }).then(function(res) {
          _this.province =res.data.provinces
          // console.log(_this.province)
        }).catch(function(res) {
          console.log('错误')
        })
      },
      getCity(provinceId) {
        let _this = this;
        params.set('provinceId',provinceId)
        _this.county = [];
//        _this.countyId = '';
        this.$ajax({
          url:'/api/area/list/city.html?channelNum='+channelNum,
          method:'post',
          data:params
        }).then(function(res) {
          _this.city = res.data.citys
        }).catch(function(res) {
          console.log('错误')
        })
      },
      getCounty(cityId) {
        params2.set('cityId',cityId)
        let _this = this;
        this.$ajax({
          url:'/api/area/list/county.html?channelNum='+channelNum,
          method:'post',
          data:params2
        }).then(function(res) {
          _this.county = res.data.countys
        }).catch(function(res) {
          console.log('错误')
        })
      },
      changeCity(){
        this.cityId = ''
        this.countyId = ''
      },
      changeCounty(){
        this.countyId = ''
      },
      handleChange:function(value) {
        console.log(value)//value就是选中结果的value值
        console.log(this.form.city)//绑定值传给后台的值
      },
      // getProv(e){
      //   console.log(e);
      //   this.getCity(e);
      //   console.log(this.province)
      //
      // }
      inChange(e) {
        this.inC = occupational[e-1]
      },
      income($event,e) {
        if(e == 'wagesAmount'){
          this.wagesAmount = $event
        }else if(e == 'seniority'){
          this.seniority = $event
        }
        console.log(this.wagesAmount)
        console.log(this.seniority)
      }
    },
    mounted() {
      this.getUserInfo()
      this.getProvince()

    },
    watch:{
      provinceId() {
        // alert(this.provinceId)
        this.getCity(this.provinceId);
        // console.log(this.province);
      },
      cityId() {
        this.getCounty(this.cityId)
        // alert(this.provinceId)
      },
      countyId() {
        console.log(this.cityId)
        console.log(this.countyId)
        console.log(this.provinceId)
      }
    }
  }
</script>

<style scoped>

</style>
<style src="../assets/reset.css"></style>
<style src="../assets/style.css"></style>
